<template>
  <view class="outter">
    <uni-search-bar
      v-if="isShowSearchBar"
      class="my-search-bar"
      :radius="searchBarConfig.radius"
      :value="value"
      :bgColor="searchBarConfig.backgroundColor"
      :textColor="searchBarConfig.textColor"
      :placeholder="placeholderText"
      @confirm="onConfirm"
      @input="onInput"
      @cancel="onCancel"
      @clear="onClear"
      @focus="onFocus"
      @blur="onBlur"
    > <uni-icons
      type="clear"
      color="#999999"
      slot="clearIcon"
    /> </uni-search-bar>
    <view class="frame"  v-else :style="{
      height:searchBarConfig.height+'px',
      backgroundColor:searchBarConfig.backgroundColor,
      color:searchBarConfig.textColor,
      border:searchBarConfig.border
    }">
      <image :src="searchBarConfig.icon" mode="aspectFit" class="logo" />
      <text class="placeholder">{{ placeholderText }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "mySearch",
  
  props:{
    searchBarConfig:{
      type:Object,
      default:()=>{
        return {
          height:36,
          backgroundColor:'#f8f8f8',
          icon:'/static/images/search.png',
          textColor:'#454545',
          border:'1px solid #c9c9c9',
          radius:100
        }
      }
    },
    isShowSearchBar:{
    type:Boolean,
    default:false
  },
    placeholderText:{
      type:String,
      default:'你好'
    },
    value:{
      type:String
    }
  },
  created(){},
  mounted(){
    // console.log(this.placeholderText);
  },
  data() {
    return {
      value:null
    };
  },
  methods:{
    onConfirm(){
      // console.log('触发了confirm事件');
      this.$emit('confirm',this.value)
    },
    onInput(val){
      // console.log(val);
      this.value = val
      this.$emit('input',val)
    },
    onCancel(){
      // console.log('取消');
      this.$emit('cancel',this.value)
    },
    onClear(){
      // console.log('清除');
      this.$emit('clear',this.value)
    },
    onFocus(){
      // console.log('获取焦点');
      this.$emit('focus',this.value)
    },
    onBlur(){
      // console.log('失去焦点');
      this.$emit('blur',this.value)
    }
  }
};
</script>

<style lang="scss" scoped>
.outter {
  display: flex;
  align-items: center;
  .my-search-bar{
    width: 700rpx;
  }
  .frame {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid $uni-border-4;
    border-radius: 15px;
    background-color: $uni-bg-color;
    .logo {
      width: 20px;
      height: 20px;
    }
    .placeholder {
      font-size: 12px;
      margin-left: 5px;
      color: $uni-base-color;
    }
  }
}
</style>
